<template>
  <div class="download-list-container">
    <h2 class="section-title">下载列表</h2>
    
    <div v-if="downloads.length === 0" class="empty-state">
      <svg class="empty-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path d="M12 2L2 7L12 12L22 7L12 2Z" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
        <path d="M2 17L12 22L22 17" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
        <path d="M2 12L12 17L22 12" stroke="currentColor" stroke-width="2" stroke-linejoin="round"/>
      </svg>
      <p>暂无下载任务</p>
      <p class="empty-hint">添加一个 P2P 下载链接开始使用</p>
    </div>

    <div v-else class="download-items">
      <DownloadItem 
        v-for="download in downloads" 
        :key="download.id"
        :download="download"
        @pause="handlePause"
        @resume="handleResume"
        @cancel="handleCancel"
        @remove="handleRemove"
      />
    </div>
  </div>
</template>

<script setup>
import { computed } from 'vue';
import { useDownloadStore } from '../stores/downloadStore';
import DownloadItem from './DownloadItem.vue';

const downloadStore = useDownloadStore();
const downloads = computed(() => downloadStore.downloads);

const handlePause = async (id) => {
  if (window.electronAPI) {
    await window.electronAPI.pauseDownload(id);
    downloadStore.setPaused(id);
  }
};

const handleResume = async (id) => {
  if (window.electronAPI) {
    await window.electronAPI.resumeDownload(id);
  }
};

const handleCancel = async (id) => {
  if (window.electronAPI) {
    await window.electronAPI.cancelDownload(id);
  }
  downloadStore.removeDownload(id);
};

const handleRemove = (id) => {
  downloadStore.removeDownload(id);
};
</script>

<style scoped>
.download-list-container {
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  border-radius: 1rem;
  padding: 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.section-title {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0 0 1.5rem 0;
  color: #e0e0e0;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  text-align: center;
}

.empty-icon {
  width: 4rem;
  height: 4rem;
  color: #505050;
  margin-bottom: 1rem;
}

.empty-state p {
  margin: 0.5rem 0;
  color: #a0a0a0;
}

.empty-hint {
  font-size: 0.875rem;
  color: #707070;
}

.download-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
</style>


